<template>
	<view class="container bg-white">		
		<view class="city_current text-center fs12 border-t1 text-gray6">当前定位：{{ cityname || ''}}</view>
		<view class="city_title fs12">热门城市</view>
		<view class="city_hots">
			<view v-for="item in hotList" class="city_hot" @click="chooseCity(item)">{{item.title}}</view>
		</view>
		<view class="city_title fs12">目前开通服务城市</view>
		<view class="city_list p-l20 p-r20">
			<view v-for="item in list" :class="'city_item '+(item.code == code ? 'city_active' : '')" @click="chooseCity(item)">{{item.title}}</view>
		</view>
	</view>
</template>
<script>
import { cityList } from "@/api/house.js"

import richTextUtil from '@/common/js/richTextUtil.js'
import moment from 'moment'
let that;
export default {
	data() {
		return {
			code: "",	
			cityname: "",
			list: [],	//所有城市
			hotList: [], //热门城市
		}
	},
	onLoad(e){
		that = this
		that.code = e.code ? e.code : ""
		that.getCityList()
	},
	methods: {		
		/**
		 * 选择城市
		 */
		chooseCity(data){ 
			uni.$emit("refresh", data)			
			uni.navigateBack({
				delta: 1
			})			
		},
		/**
		 * 城市
		 */
		getCityList() {
			cityList({
				order: "sort asc",
				condition: {
					state: 1
				}				
			}).then(res => { 
				res.data.forEach((item) => {
					if(item.code == that.code ) {
						that.cityname = item.title
					}
					if(item.is_hot == 1) {
						that.hotList.push(item)
					}
					that.list.push(item)
				})
			})
		},
	},
}
</script>

<style>
.container {
	min-height: 100vh;
}
.city_current {
	line-height: 40px;
}
.city_title {
	height: 50rpx;
	line-height: 50rpx;
	color: #666;
	background-color: #eee;
	padding: 0 20rpx;
}
.city_hots {
	padding: 30rpx 20rpx 20rpx;
}
.city_hot {
	font-size: 14px;
	background-color: #dedede;
	width: 90px;
	line-height: 36px;
	border-radius: 10rpx;
	text-align: center;
	display: inline-block;
	margin-right: 20rpx;
	margin-bottom: 20rpx;
}
.city_item {
	line-height: 40px;
	border-bottom: 1px solid #EBEEF5;
}
.city_active {
	color: #007AFF
}
</style>